I am building a mobile web app and I'm using jquerytools slider on it.

i want te slider to show (in proper ratio) across all mobile devices so width of the images is 100% and height is auto in css. However as all the elements are floated and jquerytools slider requires the position be set to absolute, the containing div (#header) doesn't stretch to fit the content.

I am trying to use jquery to get the height of the height of the img and apply that height to the header.... however I am having no luck.

CSS:

    #header{
width:100%;
position:relative;
z-index: 20;
/* box-shadow: 0 0 10px white; */
overflow: auto;
}

.scrollable {
position:relative;
overflow:hidden;
width: 100%;
height: 100%;
/* box-shadow: 0 0 20px purple; */
/*  height:198px; */
z-index: 20;
overflow: auto;
}


.scrollable .items {
/* this cannot be too large */
width:1000%;
position:absolute;
clear:both;
/* box-shadow: 0 0 30px green; */

}

.items div {
float:left;
width:10%;
height:100%;

}

/* single scrollable item */
.scrollable img {
    /* float:left; */
    width:100%;
   height: auto;
 /*    height:198px; */
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}

HTML

    <div id=header><!-- root element for scrollable -->
    <div class="scrollable" id="scrollable">

      <!-- root element for the items -->
      <div class="items">


        <div>
          <img src="img/img2.jpg" />
        </div>


        <div>
           <img src="img/img1.jpg" />
        </div>


        <div>
         <img src="img/img3.jpg" />
        </div>

        <div>
         <img src="img/img4.jpg" />
        </div>

        <div>
         <img src="img/img6.jpg" />
        </div>

    </div><!-- items -->

    </div><!-- scrollable -->

    </div><!-- header -->